<template>
  <div>
    <HeaderIndex title="提交订单" :showTwo="false" />
    <div class="one clear_fix">
      <img :src="info.img" alt="" />
      <div class="one-right">
        <p>{{ info.title }}</p>
        <p>
          {{ info.price }}
          <span>元</span>
        </p>
      </div>
    </div>
    <div class="two">
      <p>类型：</p>
      <van-tag type="warning">手办</van-tag>
    </div>
    <div class="three">
      <span>数量：</span>
      <van-stepper v-model="value" @change="changeNum" />
    </div>
    <div class="four">
      <!-- 优惠券单元格 -->
      <van-coupon-cell title="优惠卷:" :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
      <!-- 优惠券列表 -->
      <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <div class="five">
      运费:
      <span>包邮</span>
    </div>
    <div class="five">
      总价:
      <span>{{ info.price * value - (chosenCoupon == -1 ? 0 : 1.5) }}元</span>
    </div>
    <div class="six" @click="$router.push('/loca')">
      选择收货地址
    </div>
    <div class="seven" @click="goAdress">
      <div v-if="hasAdress == 'a'">
        新建收货地址
        <span><van-icon name="arrow" /></span>
      </div>
      <div v-else>
        <p>{{ hasAdress.name }} &nbsp; {{ hasAdress.tel }}</p>
        <p>{{ hasAdress.address }}</p>
      </div>
    </div>
    <div class="eight clear_fix">
      <span>
        配送说明：
      </span>
      <input type="text" placeholder="选填50字以内" />
    </div>
    <div class="nine">
      <van-button type="primary">提交订单</van-button>
    </div>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};
import { Toast } from 'vant';
export default {
  data() {
    return {
      info: {
        img: '',
        title: '',
        price: '',
      },
      value: '1',
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
    };
  },
  created() {
    if (this.$route.query.title) {
      this.info.title = this.$route.query.title;
      this.info.price = this.$route.query.price;
      this.info.img = this.$route.query.img;
    } else {
      this.info = JSON.parse(sessionStorage.getItem('info'));
    }
  },
  methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange() {
      this.coupons.push(coupon);
    },
    //改变计数器
    changeNum() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 100,
      });
    },
    onSave() {
      Toast('save');
    },
    goAdress() {
      if (localStorage.getItem('addressList')) {
        this.$router.push('/storeAdressList');
      } else {
        this.$router.push('/storeAdress');
      }
    },
  },
  beforeDestroy() {
    sessionStorage.setItem('info', JSON.stringify(this.info));
  },
  computed: {
    hasAdress() {
      if (localStorage.getItem('currentIndexAdress')) {
        return JSON.parse(localStorage.getItem('currentIndexAdress'));
      } else {
        return 'a';
      }
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  margin-top: 0.2rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.3rem;
  img {
    width: 1.3rem;
    height: 1.3rem;
    float: left;
  }
  .one-right {
    float: left;
    margin-left: 0.3rem;
    p {
      font-size: 0.35rem;
      margin: 0.1rem 0;
      &:last-child {
        color: red;
        span {
          font-size: 0.25rem;
        }
      }
    }
  }
}
.two {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.3rem;
  margin: 0 0.2rem;
  p {
    margin: 0.1rem 0;
    font-weight: 900;
    font-size: 0.3rem;
  }
  .van-tag {
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }
}
.three {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.3rem;
  margin: 0 0.2rem;

  span {
    font-weight: 900;
  }
  .van-stepper {
    float: right;
    .van-stepper__input {
      width: 1.5rem;
      background-color: white;
      border-radius: 0.1rem;
      border: 1px solid #ddd;
    }
  }
}
.four {
  border-bottom: 1px solid #ddd;
  .van-coupon-cell {
    background-color: #f5f5f5 !important;
  }
}
.van-cell__title {
  span {
    font-weight: 900;
    font-size: 0.28rem;
    margin-left: 0.2rem;
  }
}

.five {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.3rem;
  margin: 0 0.2rem;
  font-weight: 900;
  font-size: 0.28rem;
  span {
    float: right;
    color: orangered;
    font-weight: 400;
  }
}
.six {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.3rem;
  margin: 0 0.2rem;
  font-size: 0.28rem;
  color: #999;
}
.seven {
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0.3rem;
  margin: 0 0.2rem;
  font-size: 0.28rem;
  span {
    float: right;
    color: #999;
  }
}
.eight {
  box-sizing: border-box;
  padding: 0.3rem;
  margin: 0 0.2rem;
  font-size: 0.25rem;
  line-height: 0.6rem;
  input {
    width: 70%;
    border: 1px solid #999;
    padding-left: 0.1rem;
    color: #999;
    height: 0.6rem;
    float: left;
    vertical-align: middle;
  }
  span {
    float: left;
    vertical-align: middle;
  }
}
.nine {
  text-align: center;
  .van-button {
    width: 90%;
    box-sizing: border-box;
    margin: auto;
    background-color: #ff9900;
    border: none;
  }
}
</style>
